<template>
	<div id="app">
	    <div class="form">
	        <div class="call">
	            <label>收货人</label>
	            <input v-model="form.receive_name" placeholder-class="place" placeholder="请填写收货人姓名"/>
	        </div>
	        <div class="call">
	            <label>手机号码<small>+86</small></label>
	            <input v-model="form.receive_phone" type="number" placeholder-class="place" placeholder="请填写手机号码"/>
	        </div>
	        <div @click="showCityPicker" class="call">
	            <label>所在地区</label>
	            <input v-model="form.cri_name" disabled placeholder-class="place" placeholder="省市区县/乡镇"/>
	        </div>
			<city-picker v-if="area" ref="cityPicker" :area="area" @onConfirm="onConfirm"></city-picker>
	        <div class="call address">
	            <label>详细地址</label>
	            <textarea v-model="form.address" placeholder-class="place" placeholder="街道/楼牌号等"></textarea>
	        </div>
	        <div class="call">
	            <label>设置为默认地址</label>
	            <u-switch v-model="checked" @change="change" size="40" active-color="#FF6262" inactive-color="#CCCCCC"></u-switch>
	        </div>
	    </div>
	    <button @click="addAddress" class="add-btn">保存地址</button>
		<!-- #ifndef APP-PLUS -->
		<button v-if="type" @click="delAddress" class="del-btn">删 除</button>
		<!-- #endif --> 
	</div>
</template>

<script>
	import cityPicker from './components/com-city-picker/com-city-picker.vue'
	export default {
		components: {
			cityPicker
		},
		data() {
			return {
				checked:false,
				form:{
					id:'',
					receive_name:'',
					receive_phone:'',
					cri_code:'',
					cri_name:'',
					address:'',
					is_default:0,
					show_address:[]
				},
				area:'',
				type:false,
				btn:true,
			};
		},
		onLoad(option){
			if(option.list != 'undefined'){
				this.type = true;
				this.form = JSON.parse(option.list);
				this.form.cri_name = "";
				this.form.show_address.forEach(item=>{
					this.form.cri_name += item
				})
				if(this.form.is_default == 1){
					this.checked = true;
				}
				// #ifdef APP-PLUS
				const pages = getCurrentPages();
				const page = pages[pages.length - 1];
				const currentWebview = page.$getAppWebview();
				currentWebview.setTitleNViewButtonStyle(0, {  
				    text: '删除',
				});
				// #endif
			}
			this.getAreainfo();
		},
		onNavigationBarButtonTap(e) {
			this.delAddress();
		},
		methods:{
			delAddress(){
				let that = this;
				uni.showModal({
				    title: '提示',
				    content: '是否确认删除该条地址',
				    success: function (res) {
				        if (res.confirm) {
				            that.$https.address.delAddress(that.form.id)
				            		.then(res=>{
				            			uni.navigateBack();
				            		})
				        }
				    }
				});
			},
			addAddress(){
				if(!this.btn){
					return false;
				}
				if(!this.form.receive_name){
					uni.showToast({
						title:'请填写收货人姓名',
						icon:'none'
					})
					return
				}else if(!this.$u.test.mobile(this.form.receive_phone)){
					uni.showToast({
						title:'请填写正确的手机号码',
						icon:'none'
					})
					return
				}else if(!this.form.cri_code){
					uni.showToast({
						title:'请选择地区',
						icon:'none'
					})
					return
				}else if(!this.form.address){
					uni.showToast({
						title:'请填写详细地址',
						icon:'none'
					})
					return
				}
				this.btn = false;
				this.$https.Address.editAddress(this.form,this.type)
						.then(res=>{
							setTimeout(()=>{
								uni.navigateBack();
							},500)
						}).catch(res=>{
							this.btn = true;
						})
			},
			getAreainfo(){
				this.$https.Address.getAreainfo()
						.then(res=>{
							this.area = res;
						})
			},
			onConfirm(e){
				this.form.cri_code = e[2].code;
				this.form.cri_name = e[0].label + e[1].label + e[2].label;
			},
			showCityPicker() {
				this.$refs.cityPicker.show();
			},
			change(e){
				if(e){
					this.form.is_default = 1;
				}else{
					this.form.is_default = 0;
				}
			},
		}
	}
</script>

<style lang="scss">
#app {
  padding-bottom: 200rpx;
  font-size: $uni-font-size-base;
  padding-top: 12rpx;
}
.form{
  padding: 0 40rpx;
  font-size: $uni-font-size-base;
  .call{
    padding: 40rpx 0 30rpx;
    border-bottom: 2rpx solid #F2F2F2;
    display: flex;
    justify-content: flex-start;
    align-items: center;
	.place{
		font-size: $uni-font-size-base;
	}
	small{
		margin-left: 10rpx;
	}
    label{
      padding-right: 20rpx;
	  min-width: 130rpx;
    }
    input{
      width: auto;
      border: none;
      outline: none;
	  font-size: $uni-font-size-base;
    }
    textarea{
      border: none;
      outline: none;
      height: 100rpx;
	  font-size: $uni-font-size-base;
    }
  }
  .address{
    align-items: flex-start;
  }
  .call:last-child{
    justify-content: space-between;
    align-items: flex-start;
  }
}
.chooseBtn {
  display: none;
}

.choose-label {
  width: 60rpx;
  height: 32rpx;
  display: inline-block;
  border-radius: 40rpx;
  position: relative;
  background-color: #CCCCCC;
}

.choose-label:before {
  content: '';
  position: absolute;
  left: -4rpx;
  top: -12rpx;
  width: 52rpx;
  height: 52rpx;
  display: inline-block;
  border-radius: 100%;
  background-color: #F7F7F7;
  z-index: 20;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}

.chooseBtn:checked + label.choose-label:before {
  left: 32rpx;
  background: #FF6262;
}

.chooseBtn:checked + label.choose-label {
  background-color: #FFC0C0;
}
.add-btn{
  width: 90%;
  display: block;
  border: none;
  height: 80rpx;
  line-height: 80rpx;
  font-size: $uni-font-size-base;
  color: #fff;
  background: $uni-color-primary;
  border-radius: 200rpx;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0 auto 60rpx;
  outline: none;
}
.del-btn{
  width: 90%;
  display: block;
  border: none;
  height: 80rpx;
  line-height: 80rpx;
  font-size: $uni-font-size-base;
  color: #fff;
  background: #bbb;
  border-radius: 200rpx;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0 auto 170rpx;
  outline: none;
}
</style>
